<template>
    <view class="content">
        <!-- 时间搜索 -->
        <view class="u-flex time">
            <view class="t-box" @click="KStimeShow = true">
                <input type="text" v-model="startTime" placeholder="开始时间" disabled />
                <image :src="IMAGEURL + 'static/icon/time.png'"></image>
            </view>
            <view class="line"></view>
            <view class="t-box" @click="JStimeShow = true">
                <input type="text" v-model="endTime" placeholder="结束时间" disabled />
                <image :src="IMAGEURL + 'static/icon/time.png'"></image>
            </view>
            <view class="search" @click="doSearch">搜索</view>
        </view>
        
        <view class="wrapper">
            <view class="study" v-for="(item, index) in list" :key="index" 
                @click="$gTo(`/mine/pages/child-info/child-record-details?id=${item.id}&fromServe=${fromServe}`)">
                <view>{{item.date}}</view>
                <view class="study-note">{{item.record}}</view>
                <view class="img-box" v-if="item.images && item.images.length > 0">
                    <image :src="el.image" class="study-img" v-for="(el, ind) in item.images" :key="ind"></image>
                </view>
                
                <!-- 只有周期服务有 用户对陪伴师的评价 -->
                <view class="u-p-t-30" v-if="item.evaluate_id != 0 && !fromServe">
                    <view class="rate-top">
                        <u-rate :count="5" v-model="item.star" active-color="#fcc937" inactive-color="#f1f1f1" :disabled="true"></u-rate>
                        <view class="u-p-l-10">{{item.star}}星</view>
                        <view class="u-p-l-10">评分</view>
                    </view>
                    <view class="rate-down">
                        评价：<text>{{item.describes}}</text>
                    </view>
                </view>
                <!-- type 1单次 2周期 -->
                <view class="footer" v-if="item.evaluate_id == 0 && item.type == 2 && !fromServe">
                    <view class="btn3" @click.stop="openEval(item)">立即评价</view>
                </view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        
        <!-- 评价 -->
        <u-popup mode="bottom" v-model="Cshow" :closeable="true" border-radius="20">
            <view class="popup">
                <view class="popup-top">
                    <view class="pop-tit">陪伴师评价</view>
                    <view class="u-p-b-20">“{{value}}星 评分”</view>
                    <u-rate :count="5" v-model="value" active-color="#fcc937" inactive-color="#f1f1f1" 
                        :disabled="false" size="40"></u-rate>
                </view>
                <view class="pop-tip">请选择原因，我们会督促陪伴师</view>
                <view class="pop-text">
                    <view class="pop-item" v-for="(item, index) in evalist.evaluate" :key="index" 
                        :class="{popActive : item.checked}" @click="chooseEvaluate(item)">{{item.name}}</view>
                </view>
                <template v-if="isShowInput">
                    <textarea v-model="content" placeholder="您的反馈会督促我们做得更好"  :auto-height="true" class="t-inp"></textarea>
                </template>
                <view class="pop-btn" @click="doRate">立即评价</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
	export default{
		data() {
			return {
                IMAGEURL,
				KStimeShow: false, //开始时间
				JStimeShow: false, //结束时间
				startTime: '', //开始时间
				endTime: '', //结束时间
				timeParams: { //时间格式
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
                id: '',
                oid: '',
                
                value: 5,
                content: '',
                Cshow: false,
                isShowInput: false,//输入框 延迟显示
                evalist: {},
                item: {},
                fromServe: '',//1从服务人员进入的
			}
		},
		
		onLoad(option) {
            if (option.fromServe) {
                this.fromServe = option.fromServe
            }
            if (option.id) {
                this.id = option.id
            }
            if (option.oid) {
                this.oid = option.oid
            }
            this.getList()
            this.getOption()
		},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods:{
            openEval(item) {
                this.item = item
                this.Cshow = true
                setTimeout(() => {
                    this.isShowInput = true;
                });
            },
            
            // 立即评价
            doRate() {
                var eid = []
                this.evalist.evaluate.forEach(cur => {
                    if (cur.checked) {
                        eid.push(cur.id)
                    }
                })
                // if (eid.length <= 0) {
                //     this.$toast('请选择评价原因')
                //     return
                // }
                if (!this.content) {
                    this.$toast('请输入评价内容')
                    return
                }
                this.$ajax('insert_evaluate', {
                	user_token: this.$getSync('userToken'),
                	id: this.oid, //订单id
                    star: this.value,//星
                    reason_ids: eid.join(',') || '',//评价原因id
                    describes: this.content,//评价内容
                    record_id: this.item.id, //记录id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('评价提交成功')
                		this.Cshow = false
                        this.isShowInput = false
                        this.content = ''
                        this.evalist.evaluate.forEach(cur => {
                            cur.checked = false
                        })
                        
                        this.list = []
                        this.page = 1
                        this.status = 'loadmore'
                        this.getList()
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            chooseEvaluate(item) {
                item.checked = !item.checked
            },
            
            getOption() {
            	this.$ajax('order_option', {
            		
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.evalist = ret.detail
                        this.evalist.evaluate.forEach(cur => {
                            this.$set(cur, 'checked', false)
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            //预览照片
            // doPreview(item, index) {
            //     let arr = []
            //     item.forEach(cur => {
            //         arr.push(cur.image)
            //     })
            //     uni.previewImage({
            //         urls: arr,
            //         current: index,
            //         longPressActions: {
            //             success: function(data) {
            //             },
            //             fail: function(err) {
            //             }
            //         }
            //     });
            // },
            
		    //选择时间
		    chooseTime(num, e) {
		    	if (num == 1) {
		            this.startTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		        if (num == 2) {
		            this.endTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		    },
		    // 搜索
		    doSearch() {
		        this.page = 1;
		        this.list = [];
		        this.status = 'loadmore';
		        this.getList()
		    },
            
		    getList() {
		    	if (this.status == 'nomore') return;
		    	this.status = 'loading';
		    	this.$ajax('child_record', {
		    		user_token: this.$getSync('userToken'),
		    		page: this.page,
		    		limit: 10,
                    id: this.id,//孩子资料id
                    start_date: this.startTime,//开始时间
                    end_date: this.endTime,//结束时间
                    order_id: this.oid,//订单id
		    	}).then(ret => {
		    		if (ret.success == 1000) {
		    			if (ret.detail && ret.detail.record && ret.detail.record.length > 0) {
		    				this.list = this.list.concat(ret.detail.record);
		    				this.page++;
		    				this.status = 'loadmore'
		    			} else {
		    				this.status = 'nomore'
		    			}
		    		} else {
		    			this.$toast(ret.msg);
		    		}
		    	});
		    },
		}
	}
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    
    .wrapper{
        padding: 0 20rpx 100rpx;
    }
    .study{
        background-color: #fff;
        padding: 40rpx 30rpx;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        color: #808aa5;
        line-height: 1.5;
    }
    .study-note{
        padding-top: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .study-img{
        width: 194rpx;
        height: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    
    
    .time {
        width: 100%;
        padding: 20rpx;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 38rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 24rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #f29700;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #fff;
            line-height: 68rpx;
            background-color: #f29700;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    
    .rate-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #000 !important;
    }
    .rate-down{
        color: #000 !important;
    }
    .rate-down>text{
        word-break: break-all;
        white-space: pre-line;
    }
    
    .footer{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #000 !important;
    }
    .footer>view{
        font-size: 26rpx;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
    }
    .btn3{
        background-color: #fffcf8;
        border: 2rpx solid #f29700;
    }
    
    
    .popup{
        padding: 40rpx;
    }
    .popup-top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 50rpx;
        font-size: 40rpx;
        font-weight: bold;
    }
    .pop-tit{
        font-size: 34rpx;
        padding-bottom: 40rpx;
    }
    .pop-tip{
        font-size: 26rpx;
        color: #ff502e;
        padding-bottom: 15rpx;
    }
    .pop-text{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .pop-item{
        padding: 12rpx 16rpx;
        margin-right: 18rpx;
        margin-bottom: 18rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #767676;
    }
    .popActive{
        background-color: #fef8e1;
        color: #ff7d00;
    }
    
    .t-inp{
        padding: 20rpx;
        background-color: #f5f5f5;
        border: 2rpx solid #e7e7e7;
        border-radius: 10rpx;
        font-size: 26rpx;
        margin-bottom: 40rpx;
        width: 100%;
        min-height: 220rpx;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        background-color: #f29700;
        border-radius: 20rpx;
        padding: 20rpx;
    }

</style>
